<template>
	<div class="container-wrap">
		<uni-nav-bar fixed shadow :border="false" :title="info && info.title" left-icon="left" @clickLeft="onClickLeft">
			<template #right>
				<van-icon name="ellipsis" size="14" color="#333" @click="showPicker = true"  />
			</template>
		</uni-nav-bar>
		<div class="content-box">
			<div class="title fs-20 fc-333 ellipsis2 bold">{{info.title}}</div>
			<div class="user-photo flex-text-mid flex-wrap">
				<div class="lh-0">
					<generatePhoto width="28px" id="20" text="DEMO"
						style="margin-right: 0.4rem;" ></generatePhoto>
				</div>
				<div class="flex-text-mid flex-wrap ml5">
					<div class="fs-14 fc-999 ellipsis">DEMO</div>
					<span class="split-line"></span>
					<div class="fs-14 fc-999 ellipsis">{{info.pubDate}}</div>
				</div>
			</div>
			<div class="rich-text" v-html="getContent(info)"></div>
			<div class="img-box" v-if="images.length">
				<van-grid :border="false" :column-num="3" :gutter="0">
					<van-grid-item v-for="(imgItem, i) in images" :key="i" @click="startPosition = i;imgShow = true;">
						<van-image :src="imgItem" />
					</van-grid-item>
				</van-grid>
			</div>
			<div class="category fs-14 mt20 fc-999">
				分类：{{info.categoryName}}
			</div>
			<div class="category fs-14 fc-999" v-if="editionType === '2'">
				来源：{{info.siteName}}
			</div>
		</div>
		<div class="comment-box">
			<div class="title fs-16 fc-333">评论</div>
			
			<DiscussList :courseId="id" isForum isObject objType="B" showBar>
				<template #iconBox>
					<div class="icon-box">
						<div class="collect icon-item" @click="doCollect">
							<van-icon :name="info.isCollect==1 ? 'star' : 'star-o'" :size="24" />
							<p>{{ info.collectNum || 0 }}</p>
						</div>
						<div class="agree icon-item" @click="doAppraise">
							<van-icon :name="info.isPraise==1 ? 'good-job' : 'good-job-o'" :size="24" />
							<p>{{ info.praiseNum || 0 }}</p>
						</div>
					</div>
				</template>
			</DiscussList>
		</div>
		<van-action-sheet v-model="showPicker" :actions="actions" @select="onSelect" />
	</div>
</template>

<script>
	import generatePhoto from "@/components/dragMaker/generatePhoto"
	import DiscussList from "@/components/course/Discuss";
	import vanIcon from '@/components/vant/van-icon/van-icon.vue'
	import vanGridItem from '@/components/vant/van-grid-item/van-grid-item.vue'
	import vanGrid from '@/components/vant/van-grid/van-grid.vue'
	import vanImage from '@/components/vant/van-image/van-image.vue'
	import vanActionSheet from '@/components/vant/van-action-sheet/van-action-sheet.vue';
	import mockData from "@/mock/forum/detail.json"
	export default {
		name: "ForumId",
		components: {
			generatePhoto,
			DiscussList,
			vanIcon,
			vanGrid,
			vanGridItem,
			vanImage,
			vanActionSheet
		},
		data() {
			return {
				title: '',
				id: '',
				canAction: '',
				info: {},
				pageLoading: false,
				hotList: [],
				hotPage: {
					pageNumber: 1,
					pageSize: 10
				},
				images: [],
				imgShow: false,
				startPosition: 1,
				disContent: '',
				isAnonymous: 2, //是否匿名
				showPicker: false,
				actions: [{
					name: '取消发布'
				}, {
					name: '删除',
					color: '#ee0a24'
				}],

			}
		},
		mounted() {
			this.initPage()
		},
		methods: {
			doCollect() {
				this.$set(this.info, 'isCollect', this.info.isCollect==1 ? 2 : 1);
				this.$set(this.info, 'collectNum', this.info.isCollect==1 ? 1 : 0);
			},
			doAppraise(){
				this.$set(this.info, 'isPraise', this.info.isPraise==1 ? 2 : 1);
				this.$set(this.info, 'praiseNum', this.info.isPraise==1 ? 1 : 0);
			},
			initPage() {
				this.getDetail()
			},
			getContent(info) {
				try {
					return decodeURIComponent(info.content)
				} catch (e) {
					return ''
				}
			},
	
			onClickLeft() {
				uni.navigateBack({
					delta: 1
				});
			},
			onSelect(action, index) {
			    this.$toast.success("操作成功")
				this.showPicker = false
			},
			getDetail() {
				let res=mockData.data;
				this.info = res
				this.images = res.logoImgHttpUrl && res.logoImgHttpUrl.map(item => item.fileContentUrl) || []
				this.title = res.title
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/static/css/variable.scss';

	.container-wrap {
		position: relative;
		height: 100vh;
		background: #f6f6f6;

		.content-box {
			padding: 20px 15px 20px;
			background-color: #fff;

			&>.user-photo {
				//margin: 0 0 15px;
			}

			.rich-text {
				text-align: justify;
				text-align-last: left;
				font-size: 17px;
				color: #333;
				line-height: 28px;
			}
		}

		.comment-box {
			background-color: #fff;
			//padding: 20px 15px;
			padding: 20px 0;
			margin-top: 10px;
			min-height: 60vh;

			.title {
				position: relative;
				padding: 0 0 0 25px;

				&::before {
					position: absolute;
					content: "";
					left: 15px;
					//top: 0px;
					top: 50%;
					transform: translate(0, -50%);
					width: 3px;
					height: 14px;
					background: var(--color);
				}
			}

			.van-list {
				padding: 0 !important;
			}

			.agree,
			.collect {
				font-size: 12px;
				color: #999;
				position: absolute;
				right: 5px;
				top: 0px;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.van-icon {
					font-size: 24px;
				}

				span {
					display: inline-block;
					vertical-align: middle;
				}

				p {
					text-align: center;
					font-size: 11px;
					margin-top: 4px;
				}

			}
		}

		:deep(.van-grid-item__content) {
			padding: 8px 4px;

			img {
				width: 107px;
				height: 100px;
			}
		}
	}
</style>